<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
<link rel="stylesheet" href="https://form.making.link/public/lib/form-making-v3/dist/index.css">
<style>
    .vue-main{
        background-color:#ffffff;
        padding: 20px;
    }
    /* 处理图标冲突 */
    .el-input__suffix-inner .icon-arrow-down:before {
        content: "" !important;
        font-family: element-icons !important;
        display: inline-block !important;
    }
</style>
<div class="vue-main" id="app">
    <fm-generate-form
            :data="jsonData"
            :remote="remoteFuncs"
            :remote-option="dynamicData"
            ref="generateForm"
    >
    </fm-generate-form>
</div>
<script src="https://unpkg.com/vue/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/element-plus"></script>
<script src="https://form.making.link/public/lib/form-making-v3/dist/form-making-v3.umd.js"></script>
<script>
    Vue.createApp({
        data () {
            return {
                jsonData: {"list":[{"type":"grid","icon":"icon-RectangleCopy","columns":[{"type":"col","options":{"span":12,"offset":0,"push":0,"pull":0,"xs":24,"sm":12,"md":6,"lg":12,"xl":12,"customClass":""},"list":[{"type":"alert","icon":"icon-jinggaotishi","options":{"hidden":false,"title":"Info alert","type":"info","description":"","closable":true,"center":false,"showIcon":false,"effect":"light","width":"","customProps":{},"remoteFunc":"func_w3mkt5cg","remoteOption":"option_w3mkt5cg","tableColumn":false,"subform":false},"name":"提示","novalid":{},"key":"w3mkt5cg","model":"alert_w3mkt5cg","rules":[]}],"key":"iy5b9wor","rules":[]},{"type":"col","options":{"span":12,"offset":0,"push":0,"pull":0,"xs":24,"sm":12,"md":12,"lg":12,"xl":12,"customClass":""},"list":[{"type":"alert","icon":"icon-jinggaotishi","options":{"hidden":false,"title":"Info alert","type":"info","description":"","closable":true,"center":false,"showIcon":false,"effect":"light","width":"","customProps":{},"remoteFunc":"func_ihv1862n","remoteOption":"option_ihv1862n","tableColumn":false,"subform":false},"name":"提示","novalid":{},"key":"ihv1862n","model":"alert_ihv1862n","rules":[]}],"key":"3tb3pc1r","rules":[]}],"options":{"gutter":0,"justify":"start","align":"top","customClass":"","hidden":false,"flex":true,"responsive":true,"remoteFunc":"func_wfqd9xf7","remoteOption":"option_wfqd9xf7","tableColumn":false,"subform":false},"name":"栅格布局","key":"wfqd9xf7","model":"grid_wfqd9xf7","rules":[]},{"type":"tabs","icon":"icon-tabs","tabs":[{"label":"Tab 1","name":"tab_1","list":[{"type":"input","icon":"icon-input","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"clearable":false,"maxlength":"","showWordLimit":false,"customProps":{},"tip":"","extendProps":{},"remoteFunc":"func_11m9inyq","remoteOption":"option_11m9inyq","tableColumn":false,"subform":false},"events":{"onMounted":"","onChange":"","onFocus":"","onBlur":""},"name":"单行文本","key":"11m9inyq","model":"input_11m9inyq","rules":[]},{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","disabled":false,"pattern":"","patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"clearable":false,"maxlength":"","showWordLimit":false,"rows":2,"autosize":false,"customProps":{},"tip":"","extendProps":{},"remoteFunc":"func_0yo9wvuh","remoteOption":"option_0yo9wvuh","tableColumn":false,"subform":false},"events":{"onMounted":"","onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"0yo9wvuh","model":"textarea_0yo9wvuh","rules":[]},{"type":"number","icon":"icon-number","options":{"width":"","required":false,"requiredMessage":"","validatorCheck":false,"validator":"","defaultValue":0,"min":0,"max":9,"step":1,"disabled":false,"controls":true,"controlsPosition":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"precision":0,"customProps":{},"tip":"","extendProps":{},"remoteFunc":"func_hhlgazjm","remoteOption":"option_hhlgazjm","tableColumn":false,"subform":false},"events":{"onMounted":"","onChange":"","onFocus":"","onBlur":""},"name":"计数器","key":"hhlgazjm","model":"number_hhlgazjm","rules":[]},{"type":"select","icon":"icon-select","options":{"defaultValue":"","multiple":false,"disabled":false,"clearable":false,"placeholder":"","required":false,"requiredMessage":"","validatorCheck":false,"validator":"","showLabel":false,"width":"","options":[{"value":"Option 1"},{"value":"Option 2"},{"value":"Option 3"}],"remote":true,"remoteType":"datasource","remoteOption":"option_kwp52y4w","filterable":false,"remoteOptions":[],"props":{"value":"value","label":"label"},"remoteFunc":"func_kwp52y4w","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"customProps":{},"tip":"","extendProps":{},"tableColumn":false,"subform":false},"events":{"onMounted":"","onChange":"","onFocus":"","onBlur":""},"name":"下拉选择框","key":"kwp52y4w","model":"select_kwp52y4w","rules":[]},{"type":"cascader","icon":"icon-jilianxuanze","options":{"defaultValue":[],"width":"","placeholder":"","disabled":false,"clearable":false,"options":[{"value":"Option 1","label":"Option 1","children":[{"value":"Option 1 - children","label":"Option 1 - children"}]},{"value":"Option 2","label":"Option 2","children":[{"value":"Option 2 - children","label":"Option 2 - children"}]},{"value":"Option 3","label":"Option 3"}],"remote":true,"remoteType":"datasource","remoteOption":"option_5ypv1wpq","remoteOptions":[],"props":{"value":"value","label":"label","children":"children"},"remoteFunc":"func_5ypv1wpq","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"required":false,"validatorCheck":false,"validator":"","multiple":false,"filterable":false,"checkStrictly":false,"customProps":{},"tip":"","extendProps":{},"tableColumn":false,"subform":false},"events":{"onMounted":"","onChange":"","onFocus":"","onBlur":""},"name":"级联选择器","key":"5ypv1wpq","model":"cascader_5ypv1wpq","rules":[]}]}],"options":{"type":"","tabPosition":"top","customClass":"","hidden":false,"remoteFunc":"func_6rz7r6hl","remoteOption":"option_6rz7r6hl","tableColumn":false,"subform":false},"name":"标签页","key":"6rz7r6hl","model":"tabs_6rz7r6hl","rules":[]},{"type":"collapse","icon":"icon-zhediemianban","tabs":[{"title":"Collapse 1","name":"collapse_1","list":[{"type":"textarea","icon":"icon-diy-com-textarea","options":{"width":"","defaultValue":"","required":false,"requiredMessage":"","disabled":false,"pattern":"","patternMessage":"","validatorCheck":false,"validator":"","placeholder":"","customClass":"","labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"clearable":false,"maxlength":"","showWordLimit":false,"rows":2,"autosize":false,"customProps":{},"tip":"","extendProps":{},"remoteFunc":"func_vqz5a624","remoteOption":"option_vqz5a624","tableColumn":false,"subform":false},"events":{"onMounted":"","onChange":"","onFocus":"","onBlur":""},"name":"多行文本","key":"vqz5a624","model":"textarea_vqz5a624","rules":[]}]}],"options":{"type":"","accordion":false,"customClass":"","hidden":false,"remoteFunc":"func_hy5j3nbf","remoteOption":"option_hy5j3nbf","tableColumn":false,"subform":false},"name":"折叠面板","key":"hy5j3nbf","model":"collapse_hy5j3nbf","rules":[]}],"config":{"labelWidth":100,"labelPosition":"left","size":"default","customClass":"","ui":"element","layout":"horizontal","width":"100%","hideLabel":false,"hideErrorMessage":false,"eventScript":[{"key":"mounted","name":"mounted","func":""},{"key":"refresh","name":"refresh","func":""},{"key":"onFormChange","name":"onFormChange","type":"rule"}]}},
                remoteFuncs: {

                },
                dynamicData: {

                }
            }
        }
    }).use(ElementPlus).use(FormMakingV3).mount('#app')
</script>